<template>
	<view class="box" :style="{paddingBottom:aa}">
		<view class="list">
			<view class="card">
				<!-- 问 -->
				<view class="one flex">
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/user/icon_242@2x.png" mode=""></image>
					</view>
					<view class="right">
						<view class="f30 bold">{{info.comment}}</view>
						<view class="f-w f22 c666 time">
							{{info.create_time}}
						</view>
						<view class="imgs flex">
							<view class="rimg f-w" v-for="(item,idnex) of info.pics" :key="index" v-if="item">
								<image :src="item" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 答 -->
				<view class="two">
					<view class="two-title f-w">
						<view class="img f-w">
							<image src="https://jw.xzsw2021.com/static/user/icon_243@2x.png" mode=""></image>
						</view>
						<view class="f26 red">{{info.answer.length==0?'暂无人回答':`共${info.answer.length}条回答`}}</view>
					</view>
					<!-- 用户回答 -->
					<view class="user"  v-for="(item,index) in info.answer" :key="index">
						<!-- 头像 -->
						<view class="flex">
							<view class="two-img f-w">
								<image :src="item.avatar" mode="" style="border-radius: 50%;"></image>
							</view>
							<view>
								<view class="f26">{{item.nickname}}</view>
								<view class="f22 c666">{{item.create_time}}</view>
							</view>
						</view>
						<!-- 文字 -->
						<view class="text f26" style="box-sizing: border-box;padding-left: 24rpx;">{{item.comment}}</view>
						<!-- 图片 -->
						<view class="imgs flex">
							<view class="rimg f-w" v-for="(item2,index2) in item.pics" :key="index2"  v-if="item2">
								<image :src="item2" mode="" @click="prew(item2,item.pics)"></image>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!--  -->
		<view class="bottom" >
			<view class="fw-bt">
				<view class="input f-w">
					<input type="text" v-model="content" placeholder="评论一下啊~" />
				</view>
				<view class="upload" @click="goUpload">
					<image src="https://jw.xzsw2021.com/static/user/icon_244@2x.png" mode=""></image>
				</view>
				<view class="wenwen" @click="submit">立即评论</view>
			</view>
			<!-- 图片数组 -->
			<view class="bimgs flex" v-if="img_list">
				<view class="bimg f-w" v-for="(item,index) of img_list" :key="index" >
					<image :src="item.path" mode="aspectFit"></image>
					<view class="close f-w" @click.stop="del(index)">
						<image src="https://jw.xzsw2021.com/static/client/icon_95@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',//评论列表
				img_list:[],//待上传图片列表
				aa:'120rpx',
				length:2,//允许上传图片数量
				showAdd:true,//是否显示上传按钮
				content:'',//评论文字
				goodsid:'',
				pjid:''
			}
		},
		onLoad(e) {
			this.goodsid=e.goodsid
			this.pjid=e.pjid
		},
		onShow() {
			this.getlist()
		},
		methods: {
			getlist(){
				this.$request('store/product/question/detail/'+this.pjid,{},'GET').then(res=>{
					 this.info=res.data  
				})
			
			},
			// 动态获取底部高度
			getHeight(){
				let _this=this;
				let info = uni.createSelectorQuery().select(".bottom");
				info.boundingClientRect(function(data) { //data - 各种参数
					console.log(data.height)  // 获取元素高度
					_this.aa=data.height+'px'
				}).exec()
			},
			// 上传
			goUpload(){
				if(this.showAdd){
					this.$uploadImg(this.img_list,this.showAdd,this.length);
					setTimeout(()=>{
						this.getHeight()
					},3000)
				}else{
					this.$showToast('仅支持上传'+this.length+'张图片')
				}
			},
			// 删除当前图片
			del(index){
				this.img_list.splice(index,1);
				if(this.img_list.length<this.length){
					this.showAdd=true;
				}
				
			},
			prew(e,s){
		
				uni.previewImage({
					current:e,
					urls:s
				})
			},
			// 图片预览
			preImg(url){
				let imgs=[];
				this.img_list.map(item=>{
					imgs.push(item.path)
				})
				uni.previewImage({
					current:url,
					urls:imgs,
					success(res) {
						
					},
					fail(err){
						console.log(err);
					}
				})
			},
			// 提交
			submit(){
				if(!this.content.trim()){
					this.$showToast('请输入评论内容');
					return false;
				}
				if(this.img_list.length){
					let arr=[];
					this.img_list.map(item=>{
						arr.push(item.id);
					})
					arr=arr.join();
					console.log(arr);
				}
				let arr=[]
				this.img_list.forEach(item=>{
					arr.push(item.path)
				})
				let data={
					product_id:this.goodsid,
					comment:this.content,
					pics:arr,
					pid:this.pjid
				}
				uni.showLoading({
					mask:true
				})
				this.$request('store/product/question/create',data).then(res=>{
					if(res.status==200){
						this.$showToast('提交成功');
						this.getlist()
						this.content=''
						this.img_list=[]
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box{
		// padding-bottom: 230rpx;
		.list{
			overflow: hidden;
			.card{
				padding: 20rpx 30rpx;
				
				.img{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right{
					flex: 1;
					margin-left: 15rpx;
					.time{
						margin: 12rpx 0 10rpx;
					}
					.imgs{
						flex-wrap: wrap;
						// background-color: #18BC37;
						.rimg{
							margin-bottom: 15rpx;
							width: 150rpx;
							height: 150rpx;
							image{
								
								width: 100%;
								height: 100%;
								border-radius: 10rpx;
							}
						}
						&>view:not(:nth-child(4n-3)){
							margin-left: 12rpx;
						}
					}
					
				}
				.one{
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid #eee;
				}
				.two{
					.two-title{
						padding: 20rpx 0 10rpx;
					}
					.img{
						margin-right: 15rpx;
					}
					.user{
						padding: 20rpx 0 10rpx;
						border-bottom: 1rpx solid #eee;
						.tag{
							margin-left: 10rpx;
							display: inline-block;
							padding: 0 6rpx;
							font-size: 20rpx;
							color: #F83535;
							border: 1rpx solid #ED5757;
							border-radius: 4rpx;
						}
						.two-img{
							margin-right: 6rpx;
							width: 46rpx;
							height: 46rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.text{
							margin: 24rpx 0 15rpx;
						}
						.imgs{
							padding-left: 25rpx;
							flex-wrap: wrap;
							// background-color: #18BC37;
							.rimg{
								margin-bottom: 15rpx;
								width: 150rpx;
								height: 150rpx;
								image{
									
									width: 100%;
									height: 100%;
									border-radius: 10rpx;
								}
							}
							&>view:not(:nth-child(4n-3)){
								margin-left: 12rpx;
							}
						}
					}
				}
				.three{
					
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			min-height: 120rpx;
			padding: 25rpx 30rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #eee;
			z-index: 11;
			box-sizing: border-box;
			.input{
				width: 430rpx;
				height: 70rpx;
				padding-left: 30rpx;
				font-size: 26rpx;
				background: #F6F6F6;
				border-radius: 35rpx;
				box-sizing: border-box;
				input{
					width: 380rpx;
				}
			}
			.upload{
				width: 49rpx;
				height: 43rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.wenwen{
				width: 160rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
				border-radius: 35rpx;
			}
			.bimgs{
				flex-wrap: wrap;
				.bimg{
					position: relative;
					flex-shrink: 0;
					margin-top: 16rpx;
					width:160rpx;
					height: 160rpx;
					background-color: #F0F0F0;
					image{
						width: 100%;
						height: 100%;
					}
					.close{
						position: absolute;
						top: 0;
						right: 0;
						width: 40rpx;
						height: 30rpx;
						z-index: 5;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				&>view:not(:nth-child(4n)){
					margin-right: 16rpx;
				}
			}
		}
	}
</style>
